import { defineComponent, ref, nextTick } from 'vue';
import BaseCreateForm from './components/BaseCreateForm'
import TimeoutCreateForm from './components/TimeoutCreateForm'

export default defineComponent({
    components: {
        BaseCreateForm,
        TimeoutCreateForm
    },
    props: {
        nodeList: {
            type: Array,
            default: () => []
        },
        pending: {
            type: Boolean,
            default: () => true
        }
    },
    setup(props, { emit }) {
        const dialogVisible = ref(false) // 弹窗是显示
        const createFormType = ref('base') //当时为了判断是消息还是超时提醒 表单
        const currentFormType = ref(0) // 表单类型（纯表单 还是流程）
        const formRefInstance = ref<any>(null)
        const title = ref('新建规则')

        const handleShowDialog = ({ customTitleVal = '新建规则', type = 'base', params = {}, formType = 0}) => {
            title.value = customTitleVal
            createFormType.value = type
            dialogVisible.value = true
            currentFormType.value = formType
            
            nextTick(()=> Object.keys(params).length > 0 && (formRefInstance.value.formValue = params))
        }

        const handleHideDialog = () => {
            formRefInstance.value?.formResetFields()
            const formValue = formRefInstance.value?.formValue || {}
            formValue.buttonName = ''
            formValue.flowStatus = currentFormType.value === 0 ? 0 : 2
            Reflect.deleteProperty(formValue, 'bizId')
            nextTick(()=> dialogVisible.value = false )
        }

        const handleSubmit = () => {
            formRefInstance.value?.formValidate((valid: boolean) => {
                if(valid) {
                    emit('handleSubmit', formRefInstance.value.formValue)
                }
            })
        }

        return {
            title,
            formRefInstance,
            dialogVisible,
            createFormType,
            currentFormType,
            handleSubmit,
            handleShowDialog,
            handleHideDialog 
        }
    },
    render() {
        const { createFormType, title, dialogVisible, currentFormType, handleHideDialog, pending } = this
        return (
            <el-dialog 
                class="message-create-dialog"
                close-on-press-escape={false}
                title={title}
                close-on-click-modal={false}
                visible={dialogVisible}
                on={{ ['update:visible']: (val: boolean) => this.dialogVisible = val }}
                width="600px"
                onClose={handleHideDialog}
                append-to-body
                >
                { dialogVisible ? 
                    <div class="message-create-dialog__content">
                        { createFormType === 'base' ? <base-create-form ref="formRefInstance" formType={currentFormType} /> : null}
                    </div>
                    : 
                    null 
                }
                <div slot="footer" class="dialog-footer">
                    <el-button onClick={()=> this.dialogVisible = false} disabled={pending}>取 消</el-button>
                    <el-button type="primary" onClick={this.handleSubmit} disabled={pending}>保 存</el-button>
                </div>
            </el-dialog>
        )
    }
}) 

